<template>
    <view class="contain">
        <!-- 卖书清单有数据 -->
        <view class="sellList" v-if="sellbook.length !== 0">
            <!-- 卖书提示 -->
            <view style="background-color: #fff; padding: 5px;" class="tip">
                <text>
                    套装书(指ISBN码相同的系列书籍)只需扫描其中一本，扫码价即套装价，需
                    用户将整个套系全部寄出，缺册不予回收。
                </text>
            </view>
            <!-- 清单列表 -->
            <uni-swipe-action>
                <view class="list" v-for="(sellbook,index) in sellbook" :key="index">

                    <uni-swipe-action-item :right-options="options" @click="swipeActionClickHandler(sellbook)">
                        <view class="box">
                            <!-- 左边图片 -->
                            <view class="image">
                                <image :src="sellbook.book_img"></image>
                            </view>
                            <!-- 右边内容 -->
                            <view class="textBox">
                                <view class="text">
                                    <text>{{sellbook.book_name}}</text>
                                </view>
                                <view class="tag">
                                    <uni-tag text="可收多本"
                                        custom-style="background-color: #fff; border-color: #00aa00; color: #00aa00;">
                                    </uni-tag>
                                </view>
                                <view class="buttombox">
                                    <view class="box_01">
                                        回收价<text>￥{{sellbook.book_price}}</text>
                                    </view>
                                    <view class="box_02" @click="numberChange(sellbook.book_id)">
                                        <uni-number-box :min="1" :value="sellbook.book_count"
                                            @change="numChangeHandler"></uni-number-box>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </uni-swipe-action-item>

                </view>
            </uni-swipe-action>
        </view>
        <!-- 卖书清单无数据 -->
        <!-- 卖书步骤区域 -->
        <view class="sellStep" v-else>
            <view class="sellStep_01">
                <view class="letf">
                    <image src="../../static/step_01.jpg"></image>
                </view>
                <view class="right">
                    <text class="text_01">卖书第一步：</text>
                    <text class="text_02">扫描ISBN</text>
                    <text class="text_03">看您的图书价值多少</text>
                    <view class="textIcon">
                        <text>什么书不收</text>
                        <uni-icons color="#00aa00" type="arrow-down" size="20" v-if="!stepState_01"
                            @click="changeState_01"></uni-icons>
                        <uni-icons color="#00aa00" type="arrow-up" size="20" v-else @click="changeState_01"></uni-icons>
                    </view>
                </view>
                <view class="moreText" v-if="stepState_01">
                    <text>1. 不收盗版书、复印书、非法出版书。</text>
                    <text>2、不收破损、污渍、发霉、脱胶、笔记杂乱、老化发黄、附件缺失、浸水留痕的书。</text>
                    <text>3、习题册、练习册书写完成度过高拒收。</text>
                    <text>4、扫码提示不收的书籍暂时不收。</text>
                </view>
            </view>
            <view class="sellStep_01">
                <view class="right">
                    <text class="text_01">卖书第二步：</text>
                    <text class="text_02">等待快递取书</text>
                    <text class="text_03">寄书路费由彼岸收书承担</text>
                </view>
                <view class="letf">
                    <image src="../../static/step_02.jpg"></image>
                </view>
            </view>
            <view class="sellStep_01">
                <view class="letf">
                    <image src="../../static/step_03.jpg"></image>
                </view>
                <view class="right">
                    <text class="text_01">卖书第三步：</text>
                    <text class="text_02">审核到账</text>
                    <text class="text_03">余额8折购书随时可以提现</text>
                    <view class="textIcon">
                        <text>什么是审核</text>
                        <uni-icons color="#00aa00" type="arrow-down" size="20" v-if="!stepState_02"
                            @click="changeState_02"></uni-icons>
                        <uni-icons color="#00aa00" type="arrow-up" size="20" v-else @click="changeState_02"></uni-icons>
                    </view>
                </view>
                <view class="moreText" v-if="stepState_02">
                    <text>1、官方会在收到您寄的卖书快递包裹后对书籍进行审核，审核的内容包括书本的数量、种类和品相。</text>
                    <text>2、书的品相将被分为品相良好和品相不通过。</text>
                    <text>3、品相不通过的书籍会被拒收，首单可以在收到书款后48小时内申请免费退回拒收书籍，后续订单需要自付邮费。</text>
                </view>
            </view>
        </view>
        <!-- 查看扫过的书 -->
        <view class="read" @click="toSell_book">
            <text>查看扫过的书</text>
            <uni-icons type="right" size="20" color="#c5c5c5"></uni-icons>
        </view>
        <!-- 了解卖书规则 -->
        <view class="read" style="border-bottom: none;margin-top:0px;margin-bottom: 50px;" @click="toSell_text">
            <text>了解卖书规则</text>
            <uni-icons type="right" size="20" color="#c5c5c5"></uni-icons>
        </view>
        <!--  输入ISBN的提示窗 -->
        <uni-popup ref="popup" background-color="#fff" @change="change" type="center">
            <view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
                <text class="popup_title">请输入图书的ISBN编码</text>
                <text class="popup_text">请输入不含 "-" 符号的13位或10位ISBN编码</text>
                <image src="../../static/ISBN.jpg" class="popup_image"></image>
                <input class="popup_input" type="number" placeholder="在此输入ISBN编码" @input="Input"
                    :value="inputClearValue" />
                <view class="commitButton">
                    <button class="mini-btn" type="primary" size="mini" plain="true" @click="hidePopup">取消</button>
                    <button class="mini-btn" type="primary" size="mini" @click="commit()">提交</button>
                </view>
            </view>
        </uni-popup>
        <!-- 底部功能 -->
        <view class="bottom">
            <view>
                <button class="mini-btn" type="primary" size="mini" @click="scan">
                    <image src="../../static/b2.png"></image>
                    扫码卖书
                </button>
            </view>

            <view>
                <button class="mini-btn" type="primary" size="mini" plain="true" @click="toggle">
                    <image src="../../static/shuru.png"></image>
                    输入ISBN
                </button>
            </view>
        </view>
        <!-- 结算底部框 -->
        <view class="pay" v-if="sellbook.length !== 0">
            <!-- 左边文字 -->
            <view class="pay_left">
                <view style="color: #676767;font-size: 12px;line-height: 25px;">
                    共 <text>{{sellBooksCount}}</text>本，预估回收价<text>￥{{sellBooksMoney}}</text>
                </view>
                <text style="color: #bf9066;font-size: 12px;">*旧书满六本，或预估价格满40元起收</text>
            </view>
            <!-- 右边按钮 -->
            <view class="pay_right">
                <button class="button" v-if="!sellBookButton">未满足条件</button>
                <button class="active" v-else @click="tobook_order">下一步</button>
            </view>
        </view>

    </view>
</template>

<script>
    // 导入购物车徽标的显示模块
    import badgeMix from '@/mixins/tabbar-badge.js'
    import {
        mapState,
        mapMutations,
        mapGetters
    } from 'vuex'

    export default {
        mixins: [badgeMix],
        data() {
            return {
                type: '',
                change: '',
                //下拉展示的控制
                stepState_01: false,
                stepState_02: false,
                //输入值
                inputValue: '',
                inputClearValue: '',
                //书籍更新的数量
                numBook: {
                    book_id: null,
                    num: 1
                },
                //滑动删除按钮
                options: [{
                    text: '删除', // 显示的文本内容
                    style: {
                        backgroundColor: '#C00000' // 按钮的背景颜色
                    }
                }],
            };
        },
        onLoad() {
            //初始化数据库
            this.saveToStorage_databook()

            uni.showModal({
                title: '重要提示',
                content: '卖书前请仔细阅读《彼岸收书卖书答疑》',
                cancelText: '查看规则',
                cancelColor: "#f50000",
                confirmText: "开始卖书",
                confirmColor: "#13962c",
                success: function(res) {
                    if (res.confirm) {
                        console.log('用户点击确定');
                    } else if (res.cancel) {
                        uni.navigateTo({
                            url: "/subpkg/sell_text/sell_text"
                        })
                    }
                }
            });
        },
        computed: {
            ...mapState('sellBookStore', ['sellbook']),
            ...mapGetters('sellBookStore', ['sellBooksMoney', 'sellBooksCount']),
            //计算下一步按钮状态
            sellBookButton() {
                if (this.sellBooksCount >= 6 || this.sellBooksMoney >= 40) {
                    return true
                } else {
                    return false
                }

            }
        },
        methods: {
            ...mapMutations('sellBookStore', ['addbookCount', 'addToBook', 'removeSellbook', 'saveToStorage_databook']),
            // 打开折叠框功能
            changeState_01() {
                this.stepState_01 = !this.stepState_01
            },
            changeState_02() {
                this.stepState_02 = !this.stepState_02
            },
            //弹出弹窗功能
            toggle() {
                // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
                this.$refs.popup.open()
            },
            //关闭弹窗
            hidePopup() {
                this.$refs.popup.close()
            },
            //获取输入框的值
            Input: function(e) {
                this.inputValue = e.target.value
            },
            //提交功能
            commit() {
                this.hidePopup()
                this.addToBook(this.inputValue)
            },
            //扫条形码功能
            scan() {
                // 通过扫码获取信息
                uni.scanCode({
                    scanType: ['barCode'],
                    success: (res) => {
                        // console.log('条码内容：' + res.result);
                        //向数据库中进行比较ISBN码的比对,并返回比较结果（网络请求）           
                        //调用添加到扫过书籍信息库中的方法
                        this.addToBook(res.result)
                    }
                });
            },
            //了解卖书规则
            toSell_text() {
                uni.navigateTo({
                    url: "/subpkg/sell_text/sell_text"
                })
            },
            // 查看扫过的书
            toSell_book() {
                uni.navigateTo({
                    url: "/subpkg/sell_book/sell_book"
                })
            },
            //获取当前书籍数量
            numChangeHandler(e) {
                this.numBook.num = e
            },
            // 数量更新
            numberChange(book_id) {
                this.numBook.book_id = book_id
                // 更新商品的数量
                this.addbookCount(this.numBook)
            },
            // 滑动删除操作
            swipeActionClickHandler(sellbook) {
                this.removeSellbook(sellbook)
            },
            //跳转卖书订单详细页面
            tobook_order() {
                uni.navigateTo({
                    url: "/subpkg/book_order/book_order"
                })
            }
        }
    }
</script>

<style lang="scss">
    .contain {
        padding-bottom: 50px;
    }

    image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    // 卖书步骤区域
    .sellStep {
        padding-left: 10px;
        padding-right: 10px;
        width: 100%;
        display: flex;
        flex-direction: column;

        .sellStep_01 {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            margin-top: 10px;
            margin-bottom: 5px;

            .letf {
                width: 100px;
                height: 100px;
                margin-right: 10px;
                padding-right: 20px;
            }

            .right {
                width: 150px;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: center;
                text-align: start;

                .text_01 {
                    font-size: 14px;
                    margin-bottom: 5px;
                }

                .text_02 {
                    font-weight: 700;
                    color: #00aa00;
                    margin-bottom: 5px;
                }

                .text_03 {
                    font-size: 12px;
                    font-weight: 200;
                    color: #00aa00;
                    margin-bottom: 5px;
                }

                .textIcon {
                    line-height: 40px;
                    display: flex;
                    font-size: 14px;
                    color: #a1a1a1;
                }
            }

            .moreText {
                display: flex;
                flex-direction: column;
                padding: 10px;
                font-size: 12px;
                font-weight: 200px;
                color: #a1a1a1;
                line-height: 20px;
            }
        }

    }

    // 查看扫过的书
    .read {
        margin-top: 10px;
        padding-left: 10px;
        line-height: 40px;
        border-bottom: 1px solid #c5c5c5;
        color: #676767;
        font-size: 14px;
        font-weight: 200;
        display: flex;
        justify-content: space-between;
    }

    //底部功能
    .bottom {
        display: flex;
        position: fixed;
        bottom: 0px;
        padding-bottom: 5px;
        align-items: center;
        justify-content: center;
        width: 100%;

        .mini-btn {
            height: 35px;
            width: 140px;
            display: flex;
            text-align: center;
            border-radius: 15px;
            font-size: 14px;
            align-items: center;
            justify-content: center;
            margin-right: 20px;

            image {
                width: 25px;
                height: 25px;
                object-fit: cover;
                margin-right: 3px;
            }
        }
    }

    // 提示框
    .popup-content {
        border-radius: 5px;
        height: 300px;
        width: 300px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        padding: 10px;

        .popup_title {
            font-size: 20px;
            font-weight: 700;
            color: #00aa00;
            margin-top: 20px;
        }

        .popup_image {
            width: 200px;
            height: 100px;
            object-fit: cover;
        }

        .popup_text {
            font-size: 14px;
            font-weight: 400;
        }

        .popup_input {
            width: 280px;
            height: 40px;
            border-radius: 18px;
            margin-top: 5px;
            background-color: #e2e2e2;
            text-align: center;
        }

        .commitButton {
            display: flex;
            align-items: center;
            justify-content: center;

            .mini-btn {
                width: 120px;
                height: 35px;
                border-radius: 15px;
                font-size: 18px;
                margin: 20px;
                line-height: 35px;
                text-align: center;
                margin-bottom: 5px;
            }
        }
    }

    // 卖书清单列表
    .sellList {
        width: 100%;
        margin-bottom: 20px;

        .tip {
            text {
                font-size: 10px;
                color: #bf9066;
                text-align: center;
            }
        }

        .list {
            height: auto;
            width: 100%;
            margin-top: 5px;

            .box {
                display: flex;
                padding: 5px;
                border-radius: 15px;
                margin-top: 3px;
                margin-left: 10px;
                margin-right: 10px;
                background-color: #fff;

                .image {
                    width: 80px;
                    height: 80px;
                    object-fit: cover;
                    margin-top: 3px;
                    padding-left: 10px;
                }

                .textBox {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    margin-left: 10px;
                    width: 100%;

                    .text {
                        margin-bottom: 5px;
                        font-size: 14px;
                        font-weight: 400;
                    }

                    .tag {
                        margin-bottom: 30px;
                    }

                    .buttombox {
                        display: flex;
                        justify-content: space-between;

                        .box_01 {
                            font-size: 12px;
                            color: #676767;
                            font-weight: 200;

                            text {
                                color: black;
                                font-size: 16px;
                                font-weight: 600;
                            }
                        }
                    }
                }
            }
        }
    }

    .pay {
        height: auto;
        width: 100%;
        display: flex;
        justify-content: space-between;
        position: fixed;
        bottom: 45px;
        border-top: 1px solid #d8d8d8;
        background-color: #fff;

        .pay_left {
            display: flex;
            flex-direction: column;
            padding: 5px;

            text {
                color: black;
                font-size: 18px;
            }
        }

        .pay_right {
            padding: 5px;

            .active {
                height: 40px;
                width: 100px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #00aa00;
                color: #fff;
            }

            .button {
                height: 40px;
                width: 100px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #a1a1a1;
                color: #fff;
                font-size: 14px;
            }
        }
    }
</style>